.box1{
  position: absolute;
  left:50%;
  top:7%;
  transform: translate(-50%);
  height:15%;
  width: 85%;
  background-color:#f9eff5 ;
  border-radius: 15px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}



.box3{
  position: absolute;
  left:2%;
  top:50%;
  transform: translate(0,-50%);
  height:90%;
  width: 40%;
  background-color:#9ac1f9 ;
  border-radius: 40px;
}

.ball{
  position: absolute;
  left:50%;
  top:30%;
  transform: translate(-50%);
  width:50%;
  height:25%;
}

.text1{
  position: absolute;
  top:72%;
  font-size:13px;
  color: #2a2929;;
  width: 100%;
  text-align: center;
}

.day{
  color:#81b3f8;
  position: relative;
  top:1px;
  font-size: 20px;
  font-weight: bold;
  margin:3px;
}

.name_box{
  position: absolute;
  top:62%;
  height: 5%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content:center;
  align-items:center;
}

.name{
  font-size:25px;
  font-weight:bold;
}

.rename_btn{
  background:transparent;
  padding: 0;
  margin-left: 6px;
}

.edit_icon{
  font-size: 20px;
  color: #7c7c7c;
}


.text2{
  position: absolute;
  top:78%;
  left:50%;
  transform: translate(-50%);
  font-size:12px;
  color:#b0acaa;
}

.text3{
  position: absolute;
  top:1%;
  left:50%;
  transform: translate(-50%);
  font-size:19px;
  font-weight: bold;
}

.ImgBg{
  background-color: white;
  border-radius: 50%;
  width: 13vw;
  height: 13vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grow_btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.space_btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.card_btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.btn_img{
  width: 60%;
  height: 60%;
}

.grow_font{
  font-size:15px;
}

.space_font{
  font-size:15px;
}

.card_font{
  font-size:15px;
}


.fill_box{
  position: absolute;
  left:13%;
  top:50%;
  transform: translate(0,-52%);
  height: 25%;
  width: 7%;
}

.fill{
  background-color: white;
  height: 100%;
}

.menu_icon{
  font-size: 25px;
  color: #333;
}


.wifi{
  position: absolute;
  width: 100%;
  height: 100%;
}

.wifi_btn{
  position: absolute;
  left:55%;
  top:16%;
  width: 8%;
  height: 40%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


.charging{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 70%;
  height: 70%;
  z-index: 3;
}

.mask {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color:black ;
  opacity: 0.8;
  }

.circle{
  position: absolute;
  top:52%;
  left:35%;
  height: 2%;
  width: 35%;
  border-radius: 100%;
  background-color: #d0dcf3;
}


.bottom_menus_root{
  position: absolute;
  bottom:5%;
  width: 100%;
  display: flex;
  justify-content: center;

  .container{
    width: 85%;
    height: 60px;
    background-color:#fefafa ;
    border-radius: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between; 

    .menu{
      display: flex;
      align-items: center;
      justify-content: center;
      flex:2;

      .menu_item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size:11px;
      }
    }

    .menu-charge{
      flex:3;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center; 
      background-color:#9ac1f9 ;
      border-radius: 40px; 
      margin:3px;
      color:#ffffff;

      .charging_icon{
        color:#efc20b;
        font-size: 18px;
        margin-right: 5px;
      }

      .electric_box{

        &.low{
          color:red;
        }

        &.middle{
          color:#ffffff;
        }
       
      }

      .electric_icon{
          font-size: 22px !important;
      }

      .electric_value{
        color:white;
        margin-left: 5px;
      }

    }
  }

}